<template>
  <div class="divContainer">
    <el-card class="box-card" :size="size" shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <div class="topDiv"><img class="image_3" referrerpolicy="no-referrer" :src="storeIcon"/></div>
              <span class="title-span"> 库房管理</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="storebottom">
        <div class="left">

          <div id="storemain" style="height:96%;width: 40%;"></div>
          <div class="right" style="border: none;">
            <div v-for="item,index in storeData" class="rigit_div">
              <img style="width:36px;height: 36px;vertical-align: middle;" :src="item.image" alt="">
              <span class="text" style=" display:inline-block; width: 80px;font-weight: bold;">{{ item.sblxmc }}</span>
              <span class="text" style="font-size: 12px;">库存(台)</span>
              <span class="text" @click="clickNum(item.sblxbm)" style="font-weight: bold;cursor: pointer;"
                    :class="index==0?'blue':index==1?'yellow':index==2?'sky':'red'">{{ item.num }}</span>
            </div>
          </div>
        </div>
        <div class="right" style="margin-left: 5px;">
          <div style="flex: 1;">
            <div class="topText">

              <span>已贴签(台)</span>
              <span style="color: #208f89 ;">{{ tqNum }}</span>
              <el-progress :percentage=this.tqlv></el-progress>
            </div>
            <div class="bottomText">

              <span>未贴签(台)</span>
              <span style="color:#208f89 ;">{{ wtqNum }}</span>
              <el-progress :percentage=this.wtqlv></el-progress>
            </div>
            <div></div>
          </div>
        </div>


      </div>
    </el-card>
  </div>
</template>

<script>
import {firstPage} from '@/api/firstPage.js'

let echarts = require('echarts');

export default {
  name: "store",


  data() {
    return {
      size: 'mini',
      tqNum: '',
      wtqNum: '',
      title: 0,
      tqlv: 0,
      wtqlv: 0,
      equipList: [],
      storeIcon: require('./images/wodezhangdan(1).png'),
      storeData: [
        {
          image: require('./images/组3.png'),
          num: '',
          zb: '',
          sblxmc: '终端型箱变'
        },
        {
          image: require('./images/组5.png'),
          num: '',
          zb: '%',
          sblxmc: '柱式变压器'
        },
        {
          image: require('./images/组1.png'),
          num: '',
          zb: '%',
          sblxmc: '环网型箱变'
        },
        {
          image: require('./images/组8.png'),
          num: '',
          zb: '',
          sblxmc: '开闭器'
        },
      ],
      option: {},
      dialogProps: {
        visible: false,
        title: '三省物资',
        width: "90%",
        top: "5px",
      },
      iFrameUrl: '',
    }
  },
  methods: {
    getData() {
      this.equipList = []
      firstPage.getKfgl().then(res => {
        this.tqNum = res.data.tqNum
        this.wtqNum = res.data.wtqNum
        this.tqlv = Math.floor(this.tqNum / (this.tqNum + this.wtqNum) * 100)
        this.wtqlv = Math.floor(this.wtqNum / (this.tqNum + this.wtqNum) * 100)
        res.data.equipList.forEach((item, index) => {
          this.equipList.push({value: item.kcZb, name: item.sblxmc})
          this.storeData[index].num = item.kcNum
          this.storeData[index].zb = item.kcZb
          this.storeData[index].sblxbm = item.sblxbm
          // this.storeData[index].sblxmc=item.sblxmc
          this.title = this.title + item.kcNum
        })

        this.initChart();

      });
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      // .then((_) => {

      this.dialogProps.visible = false;
      // })
      // .catch((_) => { });
    },
    initChart() {
      var chartDom = document.getElementById('storemain');
      var myChart = echarts.init(chartDom);

      myChart.setOption({

        title: {
          text: ' ' + ' ' + ' ' + this.title + '\n总数(台)',
          triggerEvent: true,  // 点击可触发事件
          left: '41.5%',
          top: '40%',
          textStyle: {
            fontSize: '14',
          }
        },
        color: ['#3f6eda', '#da801e', '#158982', '#da5555', '', '',],
        normal: {
          formatter: function (val) {   //让series 中的文字进行换行
            return val.name.split(" ").join("\n");
          }

        },
        series: [
          {
            name: this.title + ' 总数(台)',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['49%', '50%'],
            avoidLabelOverlap: false,
            label: {
              formatter: "{c}% \n\n",

            },
            itemStyle: {

              borderColor: '#fff',


            },
            data: this.equipList,
          }
        ]
      });
      let that = this
      myChart.on('click', function (params) {
        if (params.componentType === 'title') {
          that.changeURL()
        }
        // console.log(params)


      });
    }
  },
  //查询数据
  mounted() {
    this.getData()
    //每1分钟取一次
    setInterval(() => {
      this.getData()
    }, 300000)


  },
}
</script>

<style scoped>
.divContainer {
  width: 100%;
  height: 100%;
  line-height: 35px;
}

.divContainer .el-card {
  border: 0px !important;
  border-radius: 0px;
}

.divContainer .el-card .el-card__header {
  padding: 0px 0px 0px 0px !important;
  border-bottom: none;
}

.divContainer .top {
  /* border-bottom: 1px solid #eee;
   */
  border-bottom: 1px solid #eee;
  padding-left: 5px;
}

.title-font {
  color: var(--theme-color-09);
}

.title-span {
  font-weight: bold;
}

.storebottom {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.storebottom .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 85%;
  width: 78%;
  border: 1px solid #eee;
}

.storebottom .left .topText {
  line-height: 40px;
  font-size: x-large;
  padding-left: 8px;
  height: 123px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;

}

.topText {
  font-weight: bold;
}

.bottomText {
  font-weight: bold;
}

.storebottom .left .bottomText {
  line-height: 40px;
  font-size: x-large;
  padding-left: 8px;
  height: 123px;
  font-weight: bold;
}

.storebottom .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 85%;
  flex: 1;
  border: 1px solid #eee;
}

.storebottom .right .rigit_div {
  width: 225px;
  /* display: flex;
  justify-content: space-around; */
}

.storebottom .right .rigit_div .textNum {
  font-size: inherit;
  font-weight: bold;
  margin-left: 4px;
  cursor: pointer;
}

.storebottom .right .rigit_div .text {
  font-size: inherit;
}

.storebottom .left .bottomText .el-progress-bar__inner {
  background-color: #7f7f7f !important;
}

.blue {
  color: #15BEF6;
}

.yellow {
  color: #FF9834;
}

.sky {
  color: #5380E6;
}

.red {
  color: #FF6969;
}

.el-progress-bar__outer {
  background-color: #fff;
}

.el-progress__text {
  color: #0e867f;
}
</style>
